<template>
  <!-- // 首页的搜索的下拉菜单组件 -->
  <div>
    <van-dropdown-menu>
      <van-dropdown-item disabled title="全部" />
      <van-dropdown-item
        v-model="value1"
        :options="option1"
        title="价格"
        @change="changeFn"
      />
      <van-dropdown-item
        v-model="value2"
        :options="filterCategory"
        title="分类"
        @change="changeFn2"
      />
    </van-dropdown-menu>
  </div>
</template>

<script>
export default {
  name: "XiaLa",
  props: ["filterCategory"],
  data() {
    return {
      value1: "desc", //默认由高到低
      //   value2: filterCategory.data.data.changed[0], //默认值
      option1: [
        { text: "价格由高到低", value: "desc" },
        { text: "价格由低到高", value: "asc" },
      ],
      //   option2: [
      //     { text: "默认排序", value: "a" },
      //     { text: "好评排序", value: "b" },
      //     { text: "销量排序", value: "c" },
      //   ],
    };
  },
  methods: {
    changeFn(val) {
      // 切换价格排序
      //   console.log(val);
      // 通过子传父把value的desc和asc传递过去 传递给search，search拿到后重新调用，请求和渲染
      //   fer是自定义事件 在父组件使用
      this.$emit("fer", val);
    },
    changeFn2(val) {
      // 分类
      //   console.log(val);
      this.$emit("fer2", val);
    },
  },

  computed: {
    // 通过this.filterCategory这个数组中的checked赋值
    // 让下拉的分类动态绑定  遍历filterCategory获取id赋值给value2，展示到页面
    // 要写get和set不然报错
    value2: {
      get() {
        let id = 0;
        this.filterCategory.forEach((ele) => {
          if (ele.checked) {
            // 因为之前吧id转化成了value，所以这里是遍历完以后的值是ele.value
            id = ele.value;
          }
        });
        return id;
      },
      set(val) {},
    },
  },
};
</script>

<style>
</style>